<template>
  <lb-layout
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    class="home"
  >
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="能耗终端:" prop="monitoringNetworkId">
        <remote-select
          v-model="queryParams.monitoringNetworkId"
          varient="networks"
          size="small"
          placeholder="请选择能耗终端"
          clearable
          @input="repaleceCode"
        ></remote-select>
      </el-form-item>
      <el-form-item label="智能设备:" prop="deviceCode">
        <el-select
          v-model="queryParams.deviceCode"
          clearable
          size="small"
          placeholder="请选择智能设备"
          :disabled="!queryParams.monitoringNetworkId"
          @change="getList"
        >
          <el-option
            v-for="item in equipmentOptions"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          v-hasPermi="['device:load:add']"
          type="primary"
          size="small"
          :disabled="
            !queryParams.monitoringNetworkId && !queryParams.deviceCode
          "
          @click="submit"
          >设置</el-button
        >
        <el-button
          v-hasPermi="['device:read:add']"
          size="small"
          :disabled="
            !queryParams.monitoringNetworkId && !queryParams.deviceCode
          "
          @click="hanldReading"
          >读取</el-button
        >
      </el-form-item>
    </el-form>
    <Title name="设置参数区" :line="false" class="mt20">
      <el-form ref="form" :model="model" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-descriptions :column="1" border>
              <el-descriptions-item
                content-class-name="default"
                label="数据上传间隔"
              >
                {{ model.uploadInterval ? model.uploadInterval + "分钟" : "" }}
              </el-descriptions-item>
              <el-descriptions-item content-class-name="default" label="IP地址">
                {{ model.ip }}
              </el-descriptions-item>
              <el-descriptions-item label="报警电量1">
                <el-form-item prop="alarmAmount1">
                  <el-input
                    size="small"
                    placeholder="请输入报警电量1"
                    v-model="model.alarmAmount1"
                    maxlength="13"
                    @input="
                      (value) => keyFixAmount(value, model, 'alarmAmount1', 0)
                    "
                  >
                    <template slot="append">
                      元
                      <el-popover
                        placement="top-start"
                        title="备注"
                        trigger="hover"
                      >
                        电参“预警电量1”、“预警电量2”使用设备型号：
                        ADF400l、DDSY1352、DTSY1352系列
                        <i slot="reference" class="el-icon-info"></i>
                      </el-popover>
                    </template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="报警功率">
                <el-form-item prop="alarmPower">
                  <el-input
                    size="small"
                    placeholder="请输入报警功率"
                    v-model="model.alarmPower"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 20)"
                  >
                    <template slot="append">
                      瓦
                      <el-popover
                        placement="top-start"
                        title="备注"
                        trigger="hover"
                      >
                        电参“预警功率” 使用设备型号： NEC-SEM系列
                        <i slot="reference" class="el-icon-info"></i>
                      </el-popover>
                    </template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item> -->
              <el-descriptions-item label="新购电量">
                <el-form-item prop="newPurchaseAmount">
                  <el-input
                    size="small"
                    placeholder="请输入新购电量"
                    v-model="model.newPurchaseAmount"
                    maxlength="13"
                    @input="
                      (value) =>
                        keyFixAmount(value, model, 'newPurchaseAmount', 0)
                    "
                  >
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="尖峰单价">
                <el-form-item prop="spikeSectionPrice">
                  <el-input
                    size="small"
                    placeholder="请输入尖峰单价"
                    v-model="model.spikeSectionPrice"
                    maxlength="13"
                    @input="
                      (value) =>
                        keyFixAmount(value, model, 'spikeSectionPrice', 1)
                    "
                  >
                    <template slot="append">元/KWH</template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="低谷单价">
                <el-form-item prop="valleySectionPrice">
                  <el-input
                    size="small"
                    placeholder="请输入低谷单价"
                    v-model="model.valleySectionPrice"
                    maxlength="13"
                    @input="
                      (value) =>
                        keyFixAmount(value, model, 'valleySectionPrice', 1)
                    "
                  >
                    <template slot="append">元/KWH</template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="8">
            <el-descriptions :column="1" border>
              <el-descriptions-item content-class-name="default" label="户号">
                {{ model.accountNo }}
              </el-descriptions-item>
              <el-descriptions-item
                content-class-name="default"
                label="电网频率"
              >
                {{ model.powerFrequency ? model.powerFrequency / 100 : "" }}
              </el-descriptions-item>
              <el-descriptions-item label="报警电量2">
                <el-form-item prop="alarmAmount2">
                  <el-input
                    size="small"
                    placeholder="请输入报警电量2"
                    v-model="model.alarmAmount2"
                    maxlength="13"
                    @input="
                      (value) => keyFixAmount(value, model, 'alarmAmount2', 0)
                    "
                  >
                    <template slot="append">
                      元
                      <el-popover
                        placement="top-start"
                        title="备注"
                        trigger="hover"
                      >
                        电参“预警电量1”、“预警电量2”使用设备型号：
                        ADF400l、DDSY1352、DTSY1352系列
                        <i slot="reference" class="el-icon-info"></i>
                      </el-popover>
                    </template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item
                content-class-name="default"
                label="剩余电量"
              >
                {{
                  model.remainingAmount === 0
                    ? "0元"
                    : model.remainingAmount
                    ? model.remainingAmount / 100 + "元"
                    : ""
                }}
              </el-descriptions-item>
              <el-descriptions-item label="高峰单价">
                <el-form-item prop="peakSectionPrice">
                  <el-input
                    v-model="model.peakSectionPrice"
                    placeholder="请输入高峰单价"
                    maxlength="13"
                    size="small"
                    @input="
                      (value) =>
                        keyFixAmount(value, model, 'peakSectionPrice', 1)
                    "
                  >
                    <template slot="append">元/KWH</template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item
                content-class-name="default"
                label="电表运行状态"
              >
                {{
                  model.deviceSwitch === 0
                    ? "开启"
                    : model.deviceSwitch === 1
                    ? "关闭"
                    : ""
                }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="8">
            <el-descriptions :column="1" border>
              <el-descriptions-item
                label="仪表编码"
                content-class-name="default"
              >
                {{ model.deviceCode }}
              </el-descriptions-item>
              <el-descriptions-item label="电压变比PT">
                <el-form-item prop="pt">
                  <el-input
                    size="small"
                    placeholder="请输入电压变比PT"
                    v-model="model.pt"
                    maxlength="13"
                    oninput="value = value.replace(/^(0+)|[^\d]+/g, '')"
                  >
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="电流变比CT">
                <el-form-item prop="ct">
                  <el-input
                    size="small"
                    placeholder="请输入电流变比CT"
                    v-model="model.ct"
                    maxlength="13"
                    oninput="value = value.replace(/^(0+)|[^\d]+/g, '')"
                  >
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="购电次数">
                <el-form-item prop="purchaseNum">
                  <el-input
                    size="small"
                    placeholder="请输入购电次数"
                    maxlength="13"
                    v-model="model.purchaseNum"
                    oninput="value = value.replace(/^(0+)|[^\d]+/g, '')"
                  >
                    <template slot="append">次</template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="平常单价">
                <el-form-item prop="flatSectionPrice">
                  <el-input
                    size="small"
                    placeholder="请输入平常单价"
                    v-model="model.flatSectionPrice"
                    maxlength="13"
                    @input="
                      (value) =>
                        keyFixAmount(value, model, 'flatSectionPrice', 1)
                    "
                  >
                    <template slot="append">元/KWH</template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item
                label="强制分合闸"
                content-class-name="default"
              >
                {{
                  model.remoteControl === 0
                    ? "关闭"
                    : model.remoteControl === 1
                    ? "开启"
                    : ""
                }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-form>
    </Title>
    <Title name="最新电参数" :line="false" class="mt10">
      <desc-base-info
        :data="model"
        :colnum-info="colnumInfo"
        align="right"
        :no-line-height="true"
        label-width="120px"
        class="base-info"
      ></desc-base-info>
    </Title>
  </lb-layout>
</template>

<script>
import { mapState } from "vuex";
import { list, reading, insert, getEquipments } from "@/api/iot/loadTariff";
import RemoteSelect from "@/components/Select/RemoteSelect";
import { dealElectricity, replaceDigit } from "@/utils/index";

export default {
  name: "loadTariff",
  components: { RemoteSelect },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        monitoringNetworkId: "",
        deviceCode: "",
      },
      model: {
        uploadInterval: "",
        alarmAmount1: "",
        alarmPower: "",
        alarmAmount2: "",
        accountNo: "",
        ct: "",
        deviceCode: "",
        flatSectionPrice: "",
        ip: "",
        newPurchaseAmount: "",
        peakSectionPrice: "",
        powerFrequency: "",
        pt: "",
        deviceSwitch: "",
        purchaseNum: "",
        remainingAmount: "",
        remoteControl: "",
        spikeSectionPrice: "",
        valleySectionPrice: "",
      },
      rules: {
        alarmPower: [
          {
            required: true,
            message: "请输入报警功率",
            trigger: "blur",
          },
        ],
        alarmAmount1: [
          {
            required: true,
            message: "请输入报警电量1",
            trigger: "blur",
          },
        ],
        alarmAmount2: [
          {
            required: true,
            message: "请输入报警电量2",
            trigger: "blur",
          },
        ],
        valleySectionPrice: [
          {
            required: true,
            message: "请输入低谷单价",
            trigger: "blur",
          },
        ],
        newPurchaseAmount: [
          {
            required: true,
            message: "请输入新购电量",
            trigger: "blur",
          },
        ],
        spikeSectionPrice: [
          {
            required: true,
            message: "请输入尖峰单价",
            trigger: "blur",
          },
        ],
        peakSectionPrice: [
          {
            required: true,
            message: "请输入高峰单价",
            trigger: "blur",
          },
        ],
        flatSectionPrice: [
          {
            required: true,
            message: "请输入平常单价",
            trigger: "blur",
          },
        ],
        purchaseNum: [
          {
            required: true,
            message: "请输入购电次数",
            trigger: "blur",
          },
        ],
        ct: [
          {
            required: true,
            message: "请输入电流变比CT",
            trigger: "blur",
          },
        ],
        pt: [
          {
            required: true,
            message: "请输入电流变比PT",
            trigger: "blur",
          },
        ],
      },
      equipmentOptions: [],
    };
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.id,
    }),
    colnumInfo({ info }) {
      return [
        { label: "A相电压", prop: "ua", colNum: 3 },
        { label: "B相电压", prop: "ub", colNum: 3 },
        { label: "C相电压", prop: "uc", colNum: 3 },
        { label: "A相电流", prop: "ia", colNum: 3 },
        { label: "B相电流", prop: "ib", colNum: 3 },
        { label: "C相电流", prop: "ic", colNum: 3 },
        { label: "AB相电压", prop: "uab", colNum: 3 },
        { label: "AC相电压", prop: "uac", colNum: 3 },
        { label: "BC相电压", prop: "ubc", colNum: 3 },
        { label: "A相有功功率", prop: "pa", colNum: 3 },
        { label: "B相有功功率", prop: "pb", colNum: 3 },
        { label: "C相有功功率", prop: "pc", colNum: 3 },
        { label: "A相无功功率", prop: "qa", colNum: 3 },
        { label: "B相无功功率", prop: "qb", colNum: 3 },
        { label: "C相无功功率", prop: "qc", colNum: 3 },
        { label: "A相视在功率", prop: "pa", colNum: 3 },
        { label: "B相视在功率", prop: "pb", colNum: 3 },
        { label: "C相视在功率", prop: "pc", colNum: 3 },
        { label: "A相功率因数", prop: "qa", colNum: 3 },
        { label: "B相功率因数", prop: "qb", colNum: 3 },
        { label: "C相功率因数", prop: "qc", colNum: 3 },
      ];
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    repaleceCode() {
      this.queryParams.deviceCode = "";
      this.getEquipmentList();
    },
    getEquipmentList() {
      getEquipments({
        monitoringNetworkId: this.queryParams.monitoringNetworkId,
      })
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.equipmentOptions = res.rows;
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!300045");
        });
    },
    keyFixAmount(value, item, key, type) {
      item[key] = type === 0 ? replaceDigit(value, 2) : replaceDigit(value, 5);
    },
    /** 查询列表 */
    getList() {
      this.$refs["form"].clearValidate();
      this.loading = true;
      list(this.queryParams)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.model = res.data;
          this.model.ua = dealElectricity(this.model.ua);
          this.model.ub = dealElectricity(this.model.ub);
          this.model.ia = dealElectricity(this.model.ia, 1000, 3);
          this.model.uc = dealElectricity(this.model.uc);
          this.model.ib = dealElectricity(this.model.ib, 1000, 3);
          this.model.ic = dealElectricity(this.model.ic, 1000, 3);
          this.model.uab = dealElectricity(this.model.uab);
          this.model.ubc = dealElectricity(this.model.ubc);
          this.model.uac = dealElectricity(this.model.uac);
          this.model.pa = dealElectricity(this.model.pa);
          this.model.pb = dealElectricity(this.model.pb);
          this.model.pc = dealElectricity(this.model.pc);
          this.model.qa = dealElectricity(this.model.qa);
          this.model.qb = dealElectricity(this.model.qb);
          this.model.qc = dealElectricity(this.model.qc);
          this.model.vpa = dealElectricity(this.model.vpa);
          this.model.vpb = dealElectricity(this.model.vpb);
          this.model.vpc = dealElectricity(this.model.vpc);
          this.model.pfa = dealElectricity(this.model.pfa);
          this.model.pfb = dealElectricity(this.model.pfb);
          this.model.pfc = dealElectricity(this.model.pfc);
          this.model.newPurchaseAmount = dealElectricity(
            this.model.newPurchaseAmount
          );
          this.model.alarmAmount1 = dealElectricity(
            this.model.alarmAmount1,
            10000
          );
          this.model.alarmAmount2 = dealElectricity(
            this.model.alarmAmount2,
            10000
          );

          this.model.peakSectionPrice = dealElectricity(
            this.model.peakSectionPrice,
            10000
          );
          this.model.spikeSectionPrice = dealElectricity(
            this.model.spikeSectionPrice,
            10000
          );
          this.model.valleySectionPrice = dealElectricity(
            this.model.valleySectionPrice,
            10000
          );
          this.model.flatSectionPrice = dealElectricity(
            this.model.flatSectionPrice,
            10000
          );
        })
        .catch((err) => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!300041");
        });
    },

    // 人工读取
    hanldReading() {
      this.loading = true;
      const data = {
        sysUserId: this.userId,
        ...this.queryParams,
        ...this.model,
        newPurchaseAmount: this.model.newPurchaseAmount * 100,
        alarmAmount1: this.model.alarmAmount1 * 100,
        alarmAmount2: this.model.alarmAmount2 * 100,
        peakSectionPrice: this.model.peakSectionPrice * 10000,
        spikeSectionPrice: this.model.spikeSectionPrice * 10000,
        valleySectionPrice: this.model.valleySectionPrice * 10000,
        flatSectionPrice: this.model.flatSectionPrice * 10000,
      };
      reading(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!300042");
        });
    },

    /** 设置按钮 */
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          const data = {
            sysUserId: this.userId,
            ...this.queryParams,
            ...this.model,
            newPurchaseAmount: this.model.newPurchaseAmount * 100,
            alarmAmount1: this.model.alarmAmount1 * 100,
            alarmAmount2: this.model.alarmAmount2 * 100,
            peakSectionPrice: this.model.peakSectionPrice * 10000,
            spikeSectionPrice: this.model.spikeSectionPrice * 10000,
            valleySectionPrice: this.model.valleySectionPrice * 10000,
            flatSectionPrice: this.model.flatSectionPrice * 10000,
          };
          insert(data)
            .then((res) => {
              this.loading = false;
              if (res.code === 700) {
                this.$message.warning(res.msg);
                return false;
              }
              this.$message.success(res.msg);
            })
            .catch((err) => {
              this.loading = false;
              // this.$message.error("系统错误,请联系管理员!300043");
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.home {
  padding: 10px 20px;
}
::v-deep .default {
  background: rgb(237, 241, 242);
}
::v-deep .el-descriptions-row {
  height: 54px;
  .el-descriptions-item__cell {
    padding: 0 10px;
  }
  .el-descriptions-item__label {
    width: 120px;
    text-align: right;
  }
}

.el-form-item {
  margin-bottom: 0;
}
::v-deep .el-form-item__error {
  padding-top: 0;
}
</style>
